<template>
    <div class="bg">
        <div class="register-container">
            <div class="logo">
                <h1>欢迎使用转物次元</h1>
                <div>请填写以下信息用以注册账号</div>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
                <el-form-item prop="username" label="用户名">
                    <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号">
                    <el-input type="text" v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                    <el-input type="text" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input show-password v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="confirm_password" label="确认密码">
                    <el-input show-password v-model="ruleForm.confirm_password" placeholder="请再次输入密码" @keyup.enter.native="register"></el-input>
                </el-form-item>
                <el-button class="registerBtn" type="primary" @click="register">
                    注册账号
                </el-button> <div class="signup-link">
                    已有帐号，<router-link class="login-link" to="/login">前往登录</router-link>
                </div>
            </el-form>
        </div>  
    </div>
</template>

<script>
    export default {
        name:'Register',
        data() {
            let reg = /^1[3456789]\d{9}$/;
            let emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
            let Phone=(rule,value,callback)=>{
                if (value === ''){
                    callback(new Error("手机号不能为空"));
                }else if (!reg.test(value)) {
                    callback(new Error("请输入有效的手机号码"));
                }else {
                    callback();
                }
            };
            let Email = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error("邮箱不能为空"));
                } else if (!emailReg.test(value)) {
                    callback(new Error("请输入正确的邮箱"));
                } else {
                    callback();
                }
            }
            let Password=(rule,value,callback)=>{
                if (value === ''){
                    callback(new Error("密码不能为空"));
                }else if (value.length<8 || value.length>20){
                    callback(new Error("密码的长度必须为8~20位"));
                }
                else {
                    callback();
                }
            };
            let Confirm_password=(rule,value,callback)=>{
                if (value === ''){
                    callback(new Error("请再次输入密码"));
                }else if (value !== this.ruleForm.password){
                    callback(new Error("两次输入密码不一致！"));
                }else {
                    callback();
                }
            };
            return {
                ruleForm:{
                    email:'',
                    phone:'',
                    username:'',
                    password:'',
                    confirm_password:''
                },
                rules:{
                    phone:[{required: true, validator: Phone,trigger:'blur'}],
                    username:[{required: true, message: '昵称不能为空', trigger: 'blur'}],
                    email: [{required: true, validator: Email, trigger: 'blur'}],
                    password:[{required: true, validator: Password,trigger:'blur'}],
                    confirm_password:[{required: true, validator: Confirm_password,trigger:'blur'}]
                }
            }
        },
        methods:{
            register(){
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.$axios.post('/admin/user/save',{
                            email: this.ruleForm.email,
                            password: this.ruleForm.password,
                            phone: this.ruleForm.phone,
                            userType: 'NORMAL',
                            username: this.ruleForm.username
                        })
                        .then(response => {
                            if (response.data.code === 200){
                                this.$message.success('注册成功');
                                setTimeout(() => {
                                    this.$router.replace('/login');
                                }, 500)         
                            }
                            else {
                                this.$message.error(response.data.message);
                                this.$refs["ruleForm"].resetFields();
                            }
                        })
                        .catch(failResponse => {
                            this.$message.error(failResponse.data.message);
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.bg {
    width: 100vw;
    height: 100vh;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url('../assets/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.register-container {
    width: 90%; /* 改为百分比宽度 */
    max-width: 500px;
    min-width: 280px; /* 设置最小宽度 */
    padding: 30px 60px; /* 调整内边距 */
    background-color: white;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 202, 168, 0.15);
    transition: all 0.3s ease;
    margin: 20px; /* 添加外边距 */
}

.register-container:hover {
    box-shadow: 0 15px 40px rgba(0, 202, 168, 0.2);
}

.logo {
    text-align: center;
    margin-bottom: 25px; /* 调整间距 */
    color: #606266;
    font-size: 14px;
}

.logo h1 {
    color: #00caa8;
    font-size: 24px; /* 调整字体大小 */
    font-weight: 600;
    margin-bottom: 8px; /* 调整间距 */
}
    
/* 响应式调整 */
@media screen and (max-width: 768px) {
    .register-container {
        padding: 25px 50px; /* 小屏幕减少内边距 */
    }
    
    .logo h1 {
        font-size: 22px; /* 小屏幕调整标题大小 */
    }
    
    .el-form-item {
        margin-bottom: 18px; /* 调整表单项间距 */
    }
}

@media screen and (max-width: 480px) {
    .register-container {
        padding: 20px 40px; /* 更小屏幕进一步减少内边距 */
        width: 95%; /* 增加宽度占比 */
    }
    
    .logo h1 {
        font-size: 20px; /* 更小屏幕调整标题大小 */
    }
    
    .el-form-item__label {
        font-size: 14px; /* 调整标签字体大小 */
    }
    
    .el-input__inner {
        padding: 10px 12px; /* 调整输入框内边距 */
    }
    
    .registerBtn {
        margin-top: 15px; /* 调整按钮上边距 */
        padding: 10px; /* 调整按钮内边距 */
    }
    
    .signup-link {
        font-size: 13px; /* 调整注册链接字体大小 */
    }
}

.registerBtn {
    width: 100%;
    margin-top: 20px;
}

a {
    text-decoration: none;
}

.signup-link {
    text-align: center;
    margin-top: 20px; /* 调整间距 */
    color: #666;
    font-size: 14px;
    .login-link {
        color: #00caa8;
        font-weight: bold;
    }
}
</style>